<template>
  <div>
  

    <MyTable :records='records'  @find='find' :flag='flag' @detail='detail'></MyTable>
    <MyDetail :flag='flag' :objs='obj' @clear='clear'></MyDetail>
  </div>

</template>
<script>
import MyDetail from './components/MyDetail.vue'
import MyTable from './components/MyTable.vue'


export default {
  data() {
    return {
      records: [
        {
          date: '2022-01-01',
          doctor: '张三',
          diagnosis: '感冒',
          prescription: '感冒药',
        },
        {
          date: '2022-02-01',
          doctor: '李四',
          diagnosis: '头疼',
          prescription: '止疼药',
        },
        {
          date: '2022-03-01',
          doctor: '王五',
          diagnosis: '腰痛',
          prescription: '止痛贴',
        },
      ],
      flag:false,
      obj:{},
    }
  },
  components: {
    MyTable,
    MyDetail
  },
  methods:{
     find(value){
      this.records= this.records.filter(item=>item.doctor.includes(value))
    },
    detail(value){
      this.flag=!this.flag
      this.obj=this.records.find(item=>item.date===value)
  
  
    },
    clear(value){
      this.flag=!value
    }
    
  },

    
 
}
</script>
<style scoped></style>
